<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>体检收费</title>
  <link rel="stylesheet" type="text/css" href="../../../themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../../../themes/icon.css">
  <script type="text/javascript" src="../../../easyui/js/jquery.min.js"></script>
  <script type="text/javascript" src="../../../easyui/js/jquery.easyui.min.js"></script>
  <style>
    body {
      font-size: 14px;
      padding: 0;
      margin: 0;
      background-color: #eee;
    }
    a {
      display: inline-block;
      text-decoration: none;
      color: #000;
      padding: 0;
      margin: 0;
    }
    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 3px solid #000;
    }
    .content{
      display: flex;
    }
    .left-content{
      width: 500px;
      margin: 10px;
    }
    .inquire, .operate, .patient-information, .membership-information, .document-details, .amount{
      background-color: #ffffff;
      border-radius: 5px;
      overflow: hidden;
    }

    .patient-information, .membership-information, .document-details, .amount{
      margin-top: 10px;
    }
    .patient-information-content, .membership-information-content, .document-details-content{
      margin: 0 20px;
    }
    .document-details-content{
      margin-top: 20px;
    }
    .amount{
      box-sizing: content-box;
      padding: 10px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }

    .amount-item{
      display: flex;
      align-items: center;
      margin-right: 20px;
    }
    .amount-item > .value{
      color: red;
    }

    .pi-item, .mi-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;
    }

    .form-content{
      display: flex;
      margin-left: 20px;
      margin-bottom: 20px;
    }
    .form-item{
      height: 30px;
      line-height: 30px;
      margin-right: 20px;
      margin-top: 20px;
    }
    .form-item .btn {
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      background: rgba(64, 158, 255, 1);
      border-radius: 10px;
    }

    .right-content{
      flex: 1;
      margin: 10px 0;
    }

    .membership-balance-item{
      margin-right: 20px;
      float: left;
      display: flex;
    }
    .card-amount{
      margin: 0 30px 0 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="title">体检收费</div>
    <div class="content">
      <div class="left-content">
        <div class="inquire">
          <div class="content-title">查询</div>
          <form class="form-content" id="inquire-form" method="post">
            <div class="form-item">
              <label for="medicalExaminationNumber">体检号：</label>
              <input class="easyui-validatebox" placeholder="请输入" type="text" id="medicalExaminationNumber" name="medicalExaminationNumber" style="width: 270px;height: 30px;"/>
            </div>
            <div class="form-item">
              <a href="#" class="btn">读卡</a>
            </div>
          </form>
        </div>
        <div class="patient-information">
          <div class="content-title">患者基本信息</div>
          <div class="patient-information-content">
            <div class="pi-item">
              <div class="name">姓名：刘东</div>
              <div class="sex">性别：男</div>
            </div>
            <div class="pi-item">
              <div class="age">年龄：25岁</div>
              <div class="phone">联系电话：13555556666</div>
            </div>
            <div class="pi-item">证件类型：居民身份证（户口簿）</div>
            <div class="pi-item">证件号码：110101198605050035</div>
            <div class="pi-item">家庭地址：山西省太原市小店区平阳路学府街21号3楼305</div>
            <div class="pi-item">体检报告领取方式：邮寄</div>
            <div class="pi-item">体检类型：团检</div>
            <div class="pi-item">企业名称：山西欣欣科技有限公司</div>
            <div class="pi-item">团检结算方式：自选套餐（套餐限额）</div>
            <div class="pi-item">套餐限额：500.00元</div>
          </div>
        </div>
        <div class="membership-information">
          <div class="content-title">会员卡信息</div>
          <div class="membership-information-content">
            <div class="form-item">
              <label for="memberNameCardNumber">会员姓名/卡号：</label>
              <input class="easyui-validatebox" placeholder="请输入" type="text" id="memberNameCardNumber" name="memberNameCardNumber" style="width: 270px;height: 30px;"/>
            </div>
            <div class="mi-item">姓名：刘东</div>
            <div class="mi-item">证件号码：110101198605050035</div>
            <div class="mi-item">会员卡号：3298468456</div>
            <div class="mi-item">企业名称：山西欣欣科技有限公司</div>
            <div class="mi-item" style="justify-content: flex-start">
              <div>会员卡&余额：</div>
              <form id="membershipBalance" style="display: flex;flex-direction: column">
                <div class="membership-balance-item">
                  <div>企业卡</div>
                  <div class="card-amount">400.00元</div>
                  <input class="easyui-checkbox" name="dateCheckBox" value="周一"><span class="date-label">使用</span>
                </div>
                <div class="membership-balance-item">
                  <div>九折卡</div>
                  <div class="card-amount">100.00元</div>
                  <input class="easyui-checkbox" name="dateCheckBox" value="周二"><span class="date-label">使用</span>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="operate">
          <div class="content-title">操作</div>
          <form class="form-content" id="ff" method="post">
            <div class="form-item">
              <label for="medicalExaminationNumber">当前票号：151216983</label>
            </div>
            <div class="form-item">
              <label for="discountAmount">优惠金额：</label>
              <input class="easyui-validatebox" placeholder="请输入" type="text" id="discountAmount" name="discountAmount" style="width: 270px;height: 30px;"/>
            </div>
            <div class="form-item">
              <a href="#" class="btn">费用补录</a>
              <a href="#" class="btn">收费</a>
            </div>
          </form>
        </div>
        <div class="document-details">
          <div class="content-title">单据明细</div>
          <div class="document-details-content">
            <table class="easyui-datagrid" data-options="ctrlSelect:true,pagination:true" style="min-height: 500px">
              <thead>
              <tr>
                <th data-options="field:'a1',width:50,align:'center'">序号</th>
                <th data-options="field:'a2',width:200,align:'center'">是否套餐</th>
                <th data-options="field:'a3',width:100,align:'center'">套餐/项目名称</th>
                <th data-options="field:'a4',width:100,align:'center'">适用性别</th>
                <th data-options="field:'a5',width:100,align:'center'">价格</th>
                <th data-options="field:'a6',width:100,align:'center'">数量</th>
                <th data-options="field:'a7',width:150,align:'center'">折扣</th>
                <th data-options="field:'a8',width:150,align:'center'">优惠金额</th>
                <th data-options="field:'a9',width:100,align:'center'">优惠价</th>
                <th data-options="field:'a10',width:50,align:'center'">是否折扣</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>1</td>
                <td>套餐</td>
                <td>2024职工体检</td>
                <td>通用</td>
                <td>355.00</td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td>355.00</td>
                <td>是</td>
              </tr>
              <tr>
                <td>1</td>
                <td>套餐</td>
                <td>2024职工体检</td>
                <td>通用</td>
                <td>355.00</td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td>355.00</td>
                <td>是</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="amount">
          <div class="amount-item">
            <div class="label">应收金额：</div>
            <div class="value">915.00</div>
          </div>
          <div class="amount-item">
            <div class="label">优惠金额：</div>
            <div class="value">915.00</div>
          </div>
          <div class="amount-item">
            <div class="label">企业团检：</div>
            <div class="value">915.00</div>
          </div>
          <div class="amount-item">
            <div class="label">会员卡：</div>
            <div class="value">915.00</div>
          </div>
          <div class="amount-item">
            <div class="label">实收金额：</div>
            <div class="value">915.00</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
